<script setup lang="ts">
  import { addActivity, detailActivity, putActivity, joinActivity } from '@/services/api/activity';
  import { onMounted, reactive } from 'vue';

  import WUpload from '@/pages/common/upload/index.vue';
  import { router } from '@/utils/router';
  import { Toast } from '@/utils/uniapi/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { HttpResponse } from '@/types/http';
  import { isArray } from '@/utils/is';
  // 路由参数
  let routeOption: any = reactive<any>({});
  const data = reactive<any>({
    form: {
      title: '',
      province: '',
      city: '',
      region: '',
      date: '',
      time: '',
      join_count: '',
      mark: '',
      picture: '',
      concat: '',
      mobile: '',
    },
    rules: {
      title: {
        type: 'string',
        require: true,
        message: '请填写标题',
        max: 32,
        trigger: ['blur', 'change'],
      },
    },
    canEdit: false,
  });

  onLoad((options) => {
    routeOption = options;
  });
  onMounted(() => {
    +routeOption.id && getDetail(+routeOption.id);
    data.canEdit = routeOption.type == 'edit' ? true : false;
  });

  // 人员选择
  const nums = new Array(20).fill(null).map((e, index) => {
    return index + 1;
  });

  // 选择日期
  const bindDateChange = (e: any) => {
    data.form.date = e.detail.value;
  };

  // 选择时间
  const bindTimeChange = (e: any) => {
    data.form.time = e.detail.value;
  };
  // 选择地点
  const bindRegionChange = (e: any) => {
    data.form.province = e.detail.value[0];
    data.form.city = e.detail.value[1];
    data.form.region = e.detail.value[2];
  };

  // 选择人员
  const bindMembersChange = (e: any) => {
    data.form.join_count = +e.detail.value + 1;
  };
  // 标题
  const onKeyInput = (e: any) => {
    data.form.title = e.target.value;
  };

  const onConcatInput = (e: any) => {
    data.form.concat = e.detail.value;
  };
  const onMobileInput = (e: any) => {
    data.form.mobile = e.detail.value;
  };

  // 查询活动详情
  const getDetail = async (id: number) => {
    const result = await detailActivity(id);
    if (result.code == 0) {
      const urls =
        result.data[0].picture.split(',')?.map((e: string) => {
          return { url: e };
        }) || [];
      result.data[0].picture = urls;
      data.form = result.data[0];
    }
  };

  // 新增活动Or修改活动
  const update = async (e: any) => {
    let result: HttpResponse;
    isArray(data.form.picture) ?? data.form.picture.join();
    !!data.form.id
      ? (result = await putActivity(data.form))
      : (result = await addActivity(data.form));
    if (result.code == 0) {
      Toast('提交成功');
      router.back();
    }
  };

  // 拼团
  const joinIn = async () => {
    joinActivity(data.form.id).then((result) => {
      Toast('拼团成功');
    });
  };

  const onUploadChange = (e: any) => {
    data.form.picture = e?.map((item: FileModel) => item.url).join();
  };
</script>
<template>
  <view class="container">
    <view class="bg-top bg-blue">
      <view class="top-box shadow">
        <view
          class="qh-pic cu-avatar xl"
          style="background-image: url(https://zhoukaiwen.com/img/kevinLogo.png)"
        >
        </view>
        <view class="qh-title text-bold text-blue text-xl">
          <text>请创建你的活动 ~</text>
        </view>
        <!-- :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']" -->
        <view>
          <view class="cu-list menu">
            <!-- 标题 -->
            <view class="cu-item" style="padding: 0">
              <view class="content">
                <text class="cuIcon-write text-red margin-right-xs"></text>
                <text class="text-black">标题</text>
              </view>
              <view class="action">
                <input
                  class="uni-input picker"
                  maxlength="20"
                  :disabled="!data.canEdit"
                  :value="data.form.title"
                  @input="onKeyInput"
                  placeholder="请输入标题"
                />
              </view>
            </view>

            <view class="cu-item" style="padding: 0">
              <view class="content">
                <text class="cuIcon-locationfill text-red margin-right-xs"></text>
                <text class="text-black">地址</text>
              </view>
              <view class="action">
                <picker
                  mode="region"
                  :value="data.form.region"
                  @change="bindRegionChange"
                  :disabled="!data.canEdit"
                >
                  <view class="picker" v-if="data.form.province">
                    {{ data.form.province }}
                    {{ data.form.city }}
                    {{ data.form.region }}
                  </view>
                  <view class="picker" v-else>
                    {{ '请选择' }}
                  </view>
                </picker>
              </view>
            </view>
            <view class="cu-item" style="padding: 0">
              <view class="content">
                <text class="cuIcon-timefill text-blue margin-right-xs"></text>
                <text class="text-black">出发日期</text>
              </view>
              <view class="action">
                <picker
                  mode="date"
                  :value="data.form.date"
                  @change="bindDateChange"
                  :disabled="!data.canEdit"
                >
                  <view class="picker" v-if="data.form.date">
                    {{ data.form.date || '请选择' }}
                  </view>
                  <view class="picker" v-else>
                    {{ data.form.date || '请选择' }}
                  </view>
                </picker>
              </view>
            </view>

            <view class="cu-item" style="padding: 0">
              <view class="content">
                <text class="cuIcon-timefill text-blue margin-right-xs"></text>
                <text class="text-black">出发时间</text>
              </view>
              <view class="action">
                <picker
                  mode="time"
                  :value="data.form.time"
                  @change="bindTimeChange"
                  :disabled="!data.canEdit"
                >
                  <view class="picker" v-if="data.form.time">
                    {{ data.form.time || '请选择' }}
                  </view>
                  <view class="picker" v-else>
                    {{ '请选择' }}
                  </view>
                </picker>
              </view>
            </view>
            <view class="cu-item" style="padding: 0">
              <view class="content">
                <text class="cuIcon-friendfill text-red"></text>
                <text class="text-black">计划人数</text>
              </view>
              <view class="action">
                <picker
                  mode="selector"
                  :range="nums"
                  @change="bindMembersChange"
                  :disabled="!data.canEdit"
                >
                  <view
                    class="cu-avatar-group flex-wrap"
                    v-if="data.form.join_count"
                    style="
                      padding-left: 10rpx;
                      margin-left: 15rpx;
                      vertical-align: middle;
                      display: flex;
                    "
                  >
                    <i
                      class="iconfont icon-zuowei"
                      v-for="(item, index) in data.form.join_count"
                      style="color: #61b52d; padding: 2px 4px"
                      :key="index"
                    ></i>
                  </view>
                  <view class="picker" v-else>
                    {{ data.form.join_count || '请选择' }}
                  </view>
                </picker>
              </view>
            </view>

            <view class="bxBox" style="border-top: 1rpx solid #eee">
              <text class="bxImg cuIcon-selectionfill text-pink"></text>
              <view class="title text-black">活动计划</view>
            </view>

            <view class="padding-bottom-sm padding-left-sm bg-white">
              <u-textarea
                v-model="data.form.mark"
                :disabled="!data.canEdit"
                count
                autoHeight
                maxlength="1000"
                placeholder="请输入内容"
              ></u-textarea>
            </view>

            <w-upload
              :value="data.form.picture || []"
              @onUploadChange="onUploadChange"
              :disabled="!data.canEdit"
            ></w-upload>
          </view>
        </view>
      </view>

      <!-- 车主信息 -->
      <view class="center-box shadow">
        <view class="cu-list menu">
          <view class="cu-bar bg-white margin-top-xs u-border-bottom">
            <view class="action sub-title">
              <text class="text-xl text-bold text-blue text-shadow">团长信息</text>
              <text class="text-ABC text-blue">OwnerTel</text>
            </view>
          </view>
          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-myfill text-blue"></text>
              <text class="text-lg">昵称</text>
            </view>
            <view class="action">
              <input
                class="uni-input picker"
                maxlength="11"
                :disabled="!data.canEdit"
                @input="onConcatInput"
                placeholder="请输入联系方式"
              />
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-mobilefill text-blue"></text>
              <text class="text-lg">联系方式</text>
            </view>
            <view class="action">
              <input
                class="uni-input picker"
                maxlength="11"
                :disabled="!data.canEdit"
                @input="onMobileInput"
                placeholder="请输入联系方式"
              />
              <!-- <view class="cu-tag round bg-blue light"> 177 **** 1131 </view> -->
            </view>
          </view>
        </view>
      </view>

      <!-- 加入按钮 -->
      <view class="padding-lr flex justify-center margin-top-sm">
        <button
          class="cu-btn bg-blue margin-top-sm lg"
          style="width: 46%"
          @click="update"
          v-if="routeOption.type == 'edit'"
          >{{ !data.form.id ? '提交活动' : '修改' }}</button
        >
        <button
          class="cu-btn bg-red margin-top-sm lg"
          style="width: 46%"
          @click="joinIn"
          v-else-if="routeOption.type == 'join'"
          >立刻拼团</button
        >
      </view>

      <view class="padding-lr" style="margin-top: 15rpx; margin-bottom: 30rpx">
        <text class="text-grey text-sm"
          >"拼团" 即可查看发布者信息，为保证您的拼团，请与发布者确认</text
        >
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
  .container {
    width: 750rpx;
    color: #333333;

    .bg-top {
      margin-top: -1rpx;
      width: 750rpx;
      height: 220rpx;
      padding-top: 50rpx;
      border-radius: 0 0 20% 20%;

      .top-box {
        width: 700rpx;
        background-color: #ffffff;
        margin: 0 auto;
        border-radius: 20rpx;
        padding: 20rpx 30rpx 0rpx;
        position: relative;

        .qh-pic {
          position: absolute;
          right: 64rpx;
          top: -50rpx;
          border-radius: 12rpx;
        }

        .qh-title {
          width: 100%;
          height: 60rpx;
          line-height: 65rpx;
          padding-right: 190rpx;
        }

        .bxBox {
          position: relative;
          display: flex;
          /* padding: 0 30rpx; */
          min-height: 100rpx;
          /* background-color: #ffffff; */
          /* justify-content: space-between; */
          align-items: center;
          font-size: 30rpx;
          line-height: 1.6em;
          flex: 1;

          .bxImg {
            display: inline-block;
            margin-right: 10rpx;
            width: 1.6em;
            text-align: center;
          }
        }
      }
    }

    .picker {
      text-align: right;
      color: #030303;
      font-size: 30rpx;
      display: inline-block;
      vertical-align: middle;
    }
    .action {
      max-width: 60%;
    }
    .action :deep(.uni-forms-item) {
      margin-bottom: 0;
    }

    .center-box {
      color: #333333;
      width: 700rpx;
      background-color: #ffffff;
      margin: 0 auto;
      border-radius: 20rpx;
      padding: 0rpx 30rpx 0rpx;
      position: relative;
      margin-top: 20rpx;
    }
  }

  .title {
    font-size: 14px;
    font-weight: bold;
    margin: 20px 0 5px 0;
  }
</style>
